<template>
	<div class="create-business">
		<el-button type="primary" :style="selfStyle">adsag</el-button>
		<el-input v-model="input" placeholder="测试使用" :style="selfStyle"></el-input>
		<el-button type="primary" @click="showDialog">创建业务</el-button>
		<!-- 弹窗 -->
		<el-dialog title="创建业务" v-bind="$attrs" width="1050px" :visible.sync="dialogFormVisible">
			<div class="container">
				<div class="left">
					<el-steps
						:active="active"
						direction="vertical"
						style="height: 550px"
						finish-status="success"
					>
						<el-step title="基础配置" />
						<el-step title="业务配置" />
						<el-step title="联动配置" />
						<el-step title="数据报告" />
						<el-step title="完成" />
					</el-steps>
				</div>

				<div class="right">
					<!-- 基础配置 -->

					<el-form v-if="active == 0" label-width="100px" class="demo-ruleForm">
						<el-form-item>
							<p>基础配置</p>
						</el-form-item>
						<el-form-item class="required" label="业务名称：" prop="name">
							<el-input placeholder="请输入" v-model="buName" maxlength="10" />
						</el-form-item>
						<el-form-item class="required" label="业务类型：" prop="name">
							<el-select v-model="buTypeValue" placeholder="请选择">
								<el-option
									v-for="item in businessType"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>
						<el-form-item class="required" label="业务级别：" prop="name">
							<el-checkbox
								v-for="item in buTypeSelectValue"
								:key="item.id"
								v-model="item.check"
								:label="item.name"
							/>
						</el-form-item>

						<el-form-item class="required" label="业务级别：" prop="name">
							<el-select v-model="sortValue" placeholder="请选择">
								<el-option
									v-for="item in sortData"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								/>
							</el-select>
						</el-form-item>

						<el-form-item class="required" label="考核指标：" prop="name">
							<el-input
								:disabled="true"
								class="w200"
								placeholder="请点击右侧图标进行选择"
							></el-input>
							<span class="iconfont" @click="assessFlag = true">&#xe655;</span>
						</el-form-item>

						<el-form-item label="关联指标：" prop="name">
							<el-input
								:disabled="true"
								style="width: 90%"
								placeholder="请点击右侧图标进行选择"
							></el-input>
							<span class="iconfont" @click="relatingFlag = true">&#xe655;</span>
						</el-form-item>
					</el-form>

					<!-- 业务配置 -->
					<el-form v-if="active == 1" lab el-width="100px" class="demo-ruleForm">
						<el-form-item>
							<p>基础配置</p>
						</el-form-item>
						<el-button class="icon-plus" type="primary">
							<i class="el-icon-plus"></i>
							添加预警
						</el-button>
						<el-form-item class="warning-msg">
							<el-button>一般预警</el-button>
							<i class="el-icon-close"></i>
						</el-form-item>
						<el-form-item class="ml" label="考核指标：" prop="name">
							<el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
							<span class="iconfont">&#xe655;</span>
						</el-form-item>
						<el-form-item class="ml" label="关联指标：" prop="name">
							<!-- <el-checkbox-group v-model="relatingValue"> -->
							<el-checkbox
								v-for="item in relatingValue"
								:key="item.name"
								:label="item.name"
								v-model="item.check"
							></el-checkbox>
							<!-- </el-checkbox-group> -->
						</el-form-item>
						<el-form-item class="ml" label="短信模板：" prop="name">
							<el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
							<span class="iconfont">&#xe655;</span>
						</el-form-item>
						<el-form-item class="ml" label="销项模板：" prop="name">
							<el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
							<span class="iconfont">&#xe655;</span>
						</el-form-item>
						<el-form-item class="ml" label="整改建议：" prop="name">
							<el-input style="width: 80%" placeholder="请点击右侧图标进行配置" :disabled="true" />
							<span class="iconfont">&#xe655;</span>
						</el-form-item>
					</el-form>
					<!-- 联动配置 -->
					<el-form v-if="active == 2" label-width="100px" class="demo-ruleForm">
						<el-form-item label="联动配置：" prop="name">
							<el-input />
						</el-form-item>
					</el-form>
					<!-- 数据报告 -->
					<el-form v-if="active == 3" label-width="100px" class="demo-ruleForm data-report">
						<div class="data-report-header">
							<el-button type="info" size="mini" class="active">
								<i class="el-icon-check"></i> 日报
							</el-button>
							<el-button type="info" size="mini"> <i class="el-icon-check"></i> 周报 </el-button>
							<el-button type="info" size="mini" :disabled="true">月报（未配置）</el-button>
							<el-button type="info" size="mini" :disabled="true">季报（未配置）</el-button>
							<el-button type="info" size="mini" :disabled="true">年报（未配置）</el-button>
						</div>

						<!-- :hide-required-asterisk="true" -->
						<el-form-item label="日报标题：" prop="name">
							<el-input size="small" placeholder="请输入标题" />
						</el-form-item>
						<el-form-item label="日报通知人：" prop="name">
							<el-input
								size="small"
								:disabled="true"
								class="w260"
								placeholder="请点击右侧图标选择人员"
							/>
							<i class="el-icon-edit ml10 mr10"></i>
							<el-checkbox></el-checkbox>
							<span>周期结束次日</span>
							<!-- v-model="" -->
							<!-- year/month/date/week/ datetime/datetimerange/daterange -->
							<el-time-picker
								class="w110 inlineB"
								:clearable="false"
								size="mini"
								type="datetime"
								v-model="dateValue"
								placeholder="1"
							></el-time-picker>
							<span>自动发送报告</span>
						</el-form-item>
					</el-form>
					<!-- 完成 -->
					<el-form v-if="active == 4" label-width="100px" class="demo-ruleForm">
						<el-form-item label="完成" prop="name">
							<el-input />
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div v-if="success" slot="footer" class="dialog-footer">
				<el-button @click="pre">上一步</el-button>
				<el-button type="primary" @click="next">下一步</el-button>
			</div>
			<div v-else slot="footer" class="dialog-footer">
				<el-button
					type="primary"
					@click=";(dialogFormVisible = false), (active = 0), (success = true)"
					>完成</el-button
				>
			</div>

			<!-- 内层 考核指标 -->
			<el-dialog title="选择考核指标" :visible.sync="assessFlag" width="490px" append-to-body>
				<div class="dia-assess">
					<el-input
						placeholder="请输入"
						style="width: 70%; text-align: center"
						v-model="seachAssess"
					>
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
					<el-tree
						:props="assessProps"
						:load="loadNode"
						lazy
						show-checkbox
						@check-change="handleCheckChange"
					></el-tree>
				</div>
				<div slot="footer">
					<el-button @click="assessFlag = false">取 消</el-button>
					<el-button type="primary" @click="assessFlag = false">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 内层关联指标 -->
			<el-dialog title="选择考核指标" :visible.sync="relatingFlag" width="490px" append-to-body>
				<div class="dia-assess">
					<el-input
						placeholder="请输入"
						style="width: 70%; text-align: center"
						v-model="seachAssess"
					>
						<el-button slot="append" icon="el-icon-search"></el-button>
					</el-input>
					<el-tree
						:props="assessProps"
						:load="loadNode"
						lazy
						show-checkbox
						@check-change="handleCheckChange"
					></el-tree>
				</div>
				<div slot="footer">
					<el-button @click="relatingFlag = false">取 消</el-button>
					<el-button type="primary" @click="relatingFlag = false">确 定</el-button>
				</div>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
	// import SuperForm from '@/components/SuperForm'
	// import { updateFormItem } from './config'

	export default {
		name: 'DeviceUpdate',
		// components: { SuperForm },
		props: {
			deviceCodeDisabled: {
				type: Boolean,
				default: false
			},
			formData: {
				type: Object,
				default: () => ({})
			},
			handleSubmit: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				input: '',
				selfStyle: {
					color: 'red'
				},
				dateValue: '', // 日期选择框
				buName: '', // 业务名称
				buTypeSelectValue: [
					// 业务类型选择数据
					{
						id: 1,
						name: '凤凰慧',
						check: false
					},
					{
						id: 2,
						name: 'iRBA',
						check: false
					},
					{
						id: 3,
						name: '集成平台',
						check: false
					},
					{
						id: 4,
						name: 'ERP',
						check: false
					},
					{
						id: 5,
						name: 'CRM',
						check: false
					},
					{
						id: 6,
						name: '碧拓系统',
						check: false
					},
					{
						id: 7,
						name: 'AHR',
						check: false
					},
					{
						id: 8,
						name: '合同系统',
						check: false
					},
					{
						id: 9,
						name: '采购系统',
						check: false
					},
					{
						id: 10,
						name: '云仓',
						check: false
					},
					{
						id: 11,
						name: '社区增值系统',
						check: false
					}
				],
				sortValue: '', //业务级别，选中的
				sortData: [
					// 业务级别选项框
					{
						value: '选项总部级',
						label: '总部级'
					},
					{
						value: '选项区域级',
						label: '区域级'
					},
					{
						value: '选项项目级',
						label: '项目级'
					}
				],

				// 第二个中
				relatingValue: [
					//关联指标
					{
						id: 1,
						name: '业主满意度',
						check: false
					},
					{
						id: 2,
						name: '工单影响率',
						check: false
					}
				],
				assessFlag: false, // 考核指标
				relatingFlag: false, // 关联指标
				seachAssess: '', // 关联指标搜索框
				assessProps: {
					//  关联指标 树形控件
					label: 'name',
					children: 'zones'
				},
				count: 1,

				active: 0,
				dialogFormVisible: false,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				success: true,
				buTypeValue: '', // 业务类型,拿到的是数据中的value
				businessType: [
					// 业务类型，下拉中内容
					{
						value: '选项1',
						label: '黄金糕'
					},
					{
						value: '选项2',
						label: '双皮奶'
					},
					{
						value: '选项3',
						label: '蚵仔煎'
					},
					{
						value: '选项4',
						label: '龙须面'
					},
					{
						value: '选项5',
						label: '北京烤鸭'
					}
				],
				value: ''
			}
		},
		watch: {
			deviceCodeDisabled: {
				handler: function () {
					// this.renderFormItem = updateFormItem(this.deviceCodeDisabled);
				},
				immediate: true
			}
		},
		methods: {
			handleCheckChange(data, checked, indeterminate) {
				// 树形控件的
				console.log(data, checked, indeterminate)
			},
			handleNodeClick(data) {
				// 树形控件的
				console.log(data)
			},
			loadNode(node, resolve) {
				if (node.level === 0) {
					return resolve([
						{
							name: 'region1'
						},
						{
							name: 'region2'
						}
					])
				}
				if (node.level > 3) return resolve([])

				var hasChild
				if (node.data.name === 'region1') {
					hasChild = true
				} else if (node.data.name === 'region2') {
					hasChild = false
				} else {
					hasChild = Math.random() > 0.5
				}

				setTimeout(() => {
					var data
					if (hasChild) {
						data = [
							{
								name: 'zone' + this.count++
							},
							{
								name: 'zone' + this.count++
							}
						]
					} else {
						data = []
					}

					resolve(data)
				}, 500)
			},
			pre() {
				if (this.active === 0) return
				this.active--
			},
			next() {
				if (this.active++ > 2) {
					this.success = false
				}
			},
			showDialog() {
				console.log(1)
				this.dialogFormVisible = true
			}
		}
	}
</script>

<style lang="scss" scope>
	@import '../css/createBusiness.scss';
</style>
